/* 引入函数模块 */

.fei-row {
  position: relative;
  display: block;
  &-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    &:before,
    &:after {
      display: flex;
    }
    &-start {
      justify-content: flex-start;
    }
    &-center {
      justify-content: center;
    }
    &-end {
      justify-content: flex-end;
    }
    &-space-between {
      justify-content: space-between;
    }
    &-space-around {
      justify-content: space-around;
    }
    &-top {
      align-items: flex-start;
    }
    &-middle {
      align-items: center;
    }
    &-bottom {
      align-items: flex-end;
    }
  }
  &:before,
  &:after {
    content: '';
    display: table;
  }
  &:after {
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
  }
}

.fei-col {
  position: relative;
  display: block;
}
@for $i from 1 to 24 {
  .fei-col-span-$i {
    float: left;
    flex: 0 0 auto;
  }
  .fei-col-span-$i {
    display: block;
    width: percentage($i, 24);
  }
  .fei-col-push-$i {
    left: percentage($i, 24);
  }
  .fei-col-pull-$i {
    right: percentage($i, 24);
  }
  .fei-col-offset-$i {
    margin-left: percentage($i, 24);
  }
  .fei-col-order-$i {
    order: $i;
  }
}

.fei-col-span-0 {
  display: none;
}
.fei-col-push-0 {
  left: auto;
}
.fei-col-pull-0 {
  right: auto;
}
.fei-col-offset-0 {
  margin-left: 0;
}
.fei-col-order-0 {
  order: 0;
}

/* xs */
@for $i from 1 to 24 {
  .fei-col-span-xs-$i {
    float: left;
    flex: 0 0 auto;
  }
  .fei-col-span-xs-$i {
    display: block;
    width: percentage($i, 24);
  }
  .fei-col-xs-push-$i {
    left: percentage($i, 24);
  }
  .fei-col-xs-pull-$i {
    right: percentage($i, 24);
  }
  .fei-col-xs-offset-$i {
    margin-left: percentage($i, 24);
  }
  .fei-col-xs-order-$i {
    order: $i;
  }
}

.fei-col-span-xs-0 {
  display: none;
}
.fei-col-xs-push-0 {
  left: auto;
}
.fei-col-xs-pull-0 {
  right: auto;
}
.fei-col-xs-offset-0 {
  margin-left: 0;
}
.fei-col-xs-order-0 {
  order: 0;
}

@media (min-width: 576px) {
  /* sm */
  @for $i from 1 to 24 {
    .fei-col-span-sm-$i {
      float: left;
      flex: 0 0 auto;
    }
    .fei-col-span-sm-$i {
      display: block;
      width: percentage($i, 24);
    }
    .fei-col-sm-push-$i {
      left: percentage($i, 24);
    }
    .fei-col-sm-pull-$i {
      right: percentage($i, 24);
    }
    .fei-col-sm-offset-$i {
      margin-left: percentage($i, 24);
    }
    .fei-col-sm-order-$i {
      order: $i;
    }
  }

  .fei-col-span-sm-0 {
    display: none;
  }
  .fei-col-sm-push-0 {
    left: auto;
  }
  .fei-col-sm-pull-0 {
    right: auto;
  }
  .fei-col-sm-offset-0 {
    margin-left: 0;
  }
  .fei-col-sm-order-0 {
    order: 0;
  }
}

@media (min-width: 768px) {
  /* md */
  @for $i from 1 to 24 {
    .fei-col-span-md-$i {
      float: left;
      flex: 0 0 auto;
    }
    .fei-col-span-md-$i {
      display: block;
      width: percentage($i, 24);
    }
    .fei-col-md-push-$i {
      left: percentage($i, 24);
    }
    .fei-col-md-pull-$i {
      right: percentage($i, 24);
    }
    .fei-col-md-offset-$i {
      margin-left: percentage($i, 24);
    }
    .fei-col-md-order-$i {
      order: $i;
    }
  }

  .fei-col-span-md-0 {
    display: none;
  }
  .fei-col-md-push-0 {
    left: auto;
  }
  .fei-col-md-pull-0 {
    right: auto;
  }
  .fei-col-md-offset-0 {
    margin-left: 0;
  }
  .fei-col-md-order-0 {
    order: 0;
  }
}

@media (min-width: 992px) {
  /* lg */
  @for $i from 1 to 24 {
    .fei-col-span-lg-$i {
      float: left;
      flex: 0 0 auto;
    }
    .fei-col-span-lg-$i {
      display: block;
      width: percentage($i, 24);
    }
    .fei-col-lg-push-$i {
      left: percentage($i, 24);
    }
    .fei-col-lg-pull-$i {
      right: percentage($i, 24);
    }
    .fei-col-lg-offset-$i {
      margin-left: percentage($i, 24);
    }
    .fei-col-lg-order-$i {
      order: $i;
    }
  }

  .fei-col-span-lg-0 {
    display: none;
  }
  .fei-col-lg-push-0 {
    left: auto;
  }
  .fei-col-lg-pull-0 {
    right: auto;
  }
  .fei-col-lg-offset-0 {
    margin-left: 0;
  }
  .fei-col-lg-order-0 {
    order: 0;
  }
}

@media (min-width: 1200px) {
  /* xl */
  @for $i from 1 to 24 {
    .fei-col-span-xl-$i {
      float: left;
      flex: 0 0 auto;
    }
    .fei-col-span-xl-$i {
      display: block;
      width: percentage($i, 24);
    }
    .fei-col-xl-push-$i {
      left: percentage($i, 24);
    }
    .fei-col-xl-pull-$i {
      right: percentage($i, 24);
    }
    .fei-col-xl-offset-$i {
      margin-left: percentage($i, 24);
    }
    .fei-col-xl-order-$i {
      order: $i;
    }
  }

  .fei-col-span-xl-0 {
    display: none;
  }
  .fei-col-xl-push-0 {
    left: auto;
  }
  .fei-col-xl-pull-0 {
    right: auto;
  }
  .fei-col-xl-offset-0 {
    margin-left: 0;
  }
  .fei-col-xl-order-0 {
    order: 0;
  }
}

@media (min-width: 1600px) {
  /* xxl */
  @for $i from 1 to 24 {
    .fei-col-span-xxl-$i {
      float: left;
      flex: 0 0 auto;
    }
    .fei-col-span-xxl-$i {
      display: block;
      width: percentage($i, 24);
    }
    .fei-col-xxl-push-$i {
      left: percentage($i, 24);
    }
    .fei-col-xxl-pull-$i {
      right: percentage($i, 24);
    }
    .fei-col-xxl-offset-$i {
      margin-left: percentage($i, 24);
    }
    .fei-col-xxl-order-$i {
      order: $i;
    }
  }

  .fei-col-span-xxl-0 {
    display: none;
  }
  .fei-col-xxl-push-0 {
    left: auto;
  }
  .fei-col-xxl-pull-0 {
    right: auto;
  }
  .fei-col-xxl-offset-0 {
    margin-left: 0;
  }
  .fei-col-xxl-order-0 {
    order: 0;
  }
}
